import React from 'react';
import {ScrollView, View, Dimensions, TouchableOpacity, Text, findNodeHandle, UIManager} from 'react-native';

const {width, height} = Dimensions.get('window');
import clamp from '../../utils/clamp';

/**
 *
 */
export default class OnScrollDemo2 extends React.Component {

  componentDidMount() {
    console.log('clamp(10,20,15);',clamp(10,20,15))

    this.count = {
      addListener: () => {},
      num: 0,
    };

    this._positionListener = new Subscription(this.count, this._onChange);


    setInterval(() => {
      console.log('setInterval', this.count.num);
      this.count.num++;
      this.count.addListener();
    }, 1000)

  }

  componentWillUnmount() {
    this._positionListener && this._positionListener.remove();
  }

  _onChange = () => {
    console.log(this.count.num)
  };

  render() {
    return (
      <ScrollView
        scrollEventThrottle={1}>
        <View style={{
          backgroundColor: 'red', alignItems: 'center', justifyContent: 'center',
          width: width, height: 100
        }}>
          <Text>第一个View</Text>
        </View>


        <View style={{
          backgroundColor: 'green', alignItems: 'center', justifyContent: 'center',
          width: width, height: 2000
        }}>
          <Text>第二个View</Text>
        </View>

      </ScrollView>
    )
  }
}

/**
 * 监听value的变化，给value 添加添加，并调用回调函数
 */
class Subscription {
  constructor(value, callback) {
    this._value = value;
    value.addListener = callback;
    this._token = callback();
    this.that = this;
  }

  remove() {
    this._token = null;
    this.that = null;
  }
}
